<template>
    <template v-if="isProd">
        <LazyPageError404
            :msg="props.error.message"
            v-if="
                props.error.statusCode == 400 || props.error.statusCode == 404
            "
        />
        <LazyPageError500 :msg="props.error.message" v-else />
    </template>

    <div v-else>
        <p>Error: {{ props.error.message }}</p>
        <p v-html="props.error.stack"></p>
    </div>
</template>

<script setup>
import LazyPageError404 from "~/views/error/404.vue";
import LazyPageError500 from "~/views/error/500.vue";

const isProd = process.env.NODE_ENV === "production";
const props = defineProps({
    error: Object,
});
</script>

<style scoped></style>
